<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<!-- <script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script> -->
<script src='http://cdn.jsdelivr.net/vue/1.0.26/vue.js'></script>
<div id="root">
	<h2>{{dataObj.text}}</h2>
</div>
<script>
	var vm = new Vue({
      el: '#root',
      data: {
        dataObj: {}
      },
      ready: function () {
        var self = this;
 
        /**
         * 异步请求模拟
         */
        setTimeout(function () {
          // self.dataObj = {};// 上述例子的模板是不会更新的。
          self.dataObj['text'] = 'new text';
        }, 3000);
      }
    })
    /**
     * self.dataObj = {};发生setter操作
     * vue监测到setter操作，通知相关指令执行更新操作
     * self.dataObj['text'] = 'new text';赋值语句
     * 指令更新开始执行
     */
    /**
     * 所以真正的触发更新操作是self.dataObj = {};这一句引起的，所以单
     * 看上述例子，具有响应式特性的数据只有dataObj这一层，它的子属性
     * 是不具备的。
     */
</script>	
</body>
</html>